Эффекты Parallax 2017
Эффектом Parallax называют визуальный эффект, ставший очень популярным в последние несколько лет. С технической точки зрения его функция в том, чтобы отделить фон сайта от других элементов. Когда вы прокручиваете страницу, фон движется медленнее, чем все остальное, а сайт из-за этого кажется объемным и глубоким. Очень симпатичный на самом деле эффект - и это одна из причин его популярности.
Простейшие эффекты параллакс можно создать самому буквально за считанные минуты. Если же вам лень писать самому, тогда к вашим услугам десятки готовых плагинов, которые могут вращать, замедлять, ускорять, превращать объекты на странице, в общем, могут помочь сделать практически что угодно.
В уроках мы познакомимся как с уже готовыми решениями, всевозможными плагинами, так и научимся писать собственный код для реализации различных параллакс эффектов.


Урок 1. Эффекты Parallax. Что такое параллакс эффект:
От автора: в первом уроке, который будет исключительно теоретическим, мы узнаем, что такое параллакс эффект, принцип его реализации с технической точки зрения, узнаем, почему сейчас эффекты параллакс столь популярны и где лучше всего их применять. Также мы рассмотрим несколько реальных примеров использования различных эффектов Parallax на реальных сайтах в сети.


Урок 2. Эффекты Parallax. Плагин Simple Parallax Scrolling:
От автора: как отмечалось в первом уроке, в сети вы можете найти множество готовых решений в виде всевозможных плагинов, реализующих тот или иной эффект параллакс. В данном уроке мы познакомимся с одним из таких плагинов — плагин Simple Parallax Scrolling, который буквально за пару минут позволит создать простой Parallax эффект.


Урок 3. Эффекты Parallax. Плагин jParallax:
От автора: в этом уроке мы познакомимся с еще одним готовым решением для реализации симпатичного и эффектного эффекта Parallax — это плагин jparallax или jQuery Parallax, который реализует эффект параллакса, привязанный к движению курсора мыши.


Урок 4. Эффекты Parallax. Создаем свой эффект Parallax:
От автора: до сего момента мы с вами использовали готовые плагины для получения эффектов Parallax. В этом уроке мы попробуем создать собственный эффект Parallax, не используя при этом специальных плагинов. Вы увидите, насколько просто и быстро можно создавать симпатичные эффекты параллакс за считанные минуты с минимумом кода и без привлечения плагинов.


Урок 5. Эффекты Parallax. Создаем свой эффект Parallax. Эффект масштабирования:
От автора: в этом уроке мы попробуем создать собственный эффект Parallax, не используя при этом специальных плагинов. В данном уроке мы создадим буквально за считанные минуты простой, но вместе с тем привлекательный эффект масштабирования, благодаря которому элемент увеличивается или уменьшается при наведении.


Урок 6. Эффекты Parallax. Создаем свой эффект Parallax. Эффект прожектора:
От автора: в данном уроке мы создадим буквально за считанные минуты простой, но вместе с тем привлекательный эффект, который часто называют эффектом прожектора или эффектом перископа.


Урок 7. Эффекты Parallax. Плагин jInvertScroll. Горизонтальный скролл страницы:
От автора: в этом уроке мы поработаем с плагином jInvertScroll. Как следует из названия, плагин действительно делает определенную инверсию скролла и вместо стандартного вертикального скролла сверху вниз, мы получаем горизонтальный скролл страница слева направо. Смотрится оригинально и может подойти для сайтов-визиток и одностраничников.


Урок 8. Эффекты Parallax. Появление картинок при скролле. Урок 1:
От автора: в этом и следующем уроке мы создадим с вами простой и привлекательный эффект, привязанный к скроллу страницы. Думаю, вы могли встречаться с таким эффектом не раз, особенно на продающих страницах. Речь идет об анимации появления картинок при скролле страницы.


Урок 9. Эффекты Parallax. Появление картинок при скролле. Урок 2:
От автора: в этом уроке мы завершим реализацию простого и привлекательного эффекта появления картинок галереи при скролле страницы. Данный эффект достаточно популярен в сети, особенно на продающих страницах. Реализуется он зачастую с привлечением дополнительных библиотек. Мы же реализуем его, написав собственное решение.


Урок 10. Эффекты Parallax. Плагин multiScroll.js:
От автора: в этом уроке мы обратимся к плагину multiScroll.js и с его помощью создадим эффект собирания секций из частей при скролле по ним. Данный плагин идеально подойдет для одностраничных сайтов и сайтов, состоящих из секций. Кроме того, плагин имеет массу настроек, которые, например, позволяют быстро добавить меню для скролла по секциям.


Урок 11. Эффекты Parallax. Падающий снег:
От автора: в этом уроке мы поработаем со скриптом, который позволит добавить на ваш сайт эффект падающего снега. Данный скрипт можно буквально за считанные минуты добавить на любой сайт в канун Нового года. Также скрипт падающий снег предлагает несколько опций, позволяющих настроить эффект по своему вкусу.


Урок 12. Эффекты Parallax. Анимация при скролле:
От автора: в этом уроке мы узнаем, как можно реализовать анимационные эффекты появления элементов, которые будут привязаны к скроллу страницы. Для реализации задачи мы воспользуемся библиотекой animate.css и плагином wow.js. Также мы напишем и собственное решение, благодаря которому анимация будет проигрываться каждый раз при скролле к элементу.


Урок 13. Эффекты Parallax. Scroll Indicator — прогресс бар при скролле:
От автора: в этом уроке мы попробуем реализовать достаточно интересный эффект, суть которого сводится к реализации различных вариантов прогресс бара, являющегося индикатором высоты страницы. В качестве прогресс бара можно будет использовать как блок с заливкой, так и тематическую картинку.